<template>
  <div>
      <TopBar>修改手机号</TopBar>
      <div class="setPhoneBox2"  style="margin-top:1.5rem">
        <Steps type="2"></Steps>
        <InputType title="新手机号" class="vux-1px-t" type1="1" style="margin-top:1.0667rem" @getPhone="getPhone"></InputType>
        <InputType title="验证码" class="vux-1px-tb" type1="2" @getValue="getValue" type="editphone" :phone1="phone"></InputType>
        <div class="setPhone2Btn" @click="next">提交</div>
      </div>
      <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>
  </div>
</template>
<script>
import Steps from './children/Steps'
import TopBar from '../../component/common/TopBar'
import InputType from '../setPwd/children/inputType'
import {setPhone2} from  '../../../service/getData'
import {showMsg,verify} from '../../../config/mUtils'
import { Toast } from 'vux'
import { clearTimeout } from 'timers';
import {getSDK} from '../../../service/wxShare.js'

let time = null
export default {
  components:{
    Steps,
    TopBar,
    InputType,
    Toast
  },
  beforeCreate(){
      getSDK()
    },
  data(){
    return {
      phone:'',
      code:'',
      oldphone:this.$route.params.oldphone,
      valid:this.$route.params.valid,
      msg:'',
      showPositionValue:false,
    }
  },
    methods:{
    next(){
      if(this.phone ==''){
        showMsg('手机号不能为空',this)
      }else if(this.code == ''){
        showMsg('验证码不能为空',this)
      }else if(!verify(this.phone,1)){
        showMsg("手机号格式错误",this)
      }else if(!verify(this.code,3)){
        showMsg("验证码格式错误",this)
      }else{
        setPhone2(this.oldphone,this.phone,this.code,this.valid)
          .then(res=>{
            //console.log(res)
            if(res.status == 1){
              time = setTimeout(()=>{
                this.$router.push({
                  name:'SetPhoneStep3',
                  params:{
                    newPhone:this.phone,
                  }
                })
              },2000)
            }
            showMsg(res.msg,this)
          })
      }
    },
    getPhone(data){
      this.phone = data
    },
    getValue(data){
      this.code = data
    }
  },
  beforeDestroy(){
    clearTimeout(time)
  }
}
</script>
<style lang="less">
  @import '../../../style/mixin.less';

  .setPhoneBox2{
    .wh(8.2933rem,100%);
    margin: 0 auto;
    // .bg(yellow)
    .setPhone2Btn{
      .wh(100%,1.1733rem);
      line-height: 1.1733rem;
      text-align: center;
      .borderRadius(2rem);
      .bg(#e2482e);
      margin-top: 1.0667rem;
      font-size: .42rem;
      color:#fff;
    }
    .weui-toast,.weui-toast_text,.vux-toast-middle{
        width: 70% !important;
      }
  }
</style>
